<template>
  <div id="shopList">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="店铺名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="店铺介绍">
              <span>{{ props.row.description }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="联系电话">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="评分">
              <span>{{ props.row.rating }}</span>
            </el-form-item>
            <el-form-item label="销售量">
              <span>{{ props.row.recent_order_num }}</span>
            </el-form-item>
            <el-form-item label="分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="店铺名称" prop="name" width="180"></el-table-column>
      <el-table-column label="店铺地址" prop="address" width="300"></el-table-column>
      <el-table-column label="店铺介绍" prop="description"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="Success" @click="addFood(scope.$index, scope.row)">添加食品</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="Pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="count">
      </el-pagination>
    </div>
    <el-dialog title="修改店铺信息" :visible.sync="dialogFormVisible">
      <el-form :model="selectTable">
        <el-form-item label="店铺名称" label-width="100px">
          <el-input v-model="selectTable.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" label-width="100px">
          <el-autocomplete
            v-model="address.address"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入地址"
            style="width: 100%;"
            @select="addressSelect"
          ></el-autocomplete>
          <span>当前城市：{{city.name}}</span>
        </el-form-item>
        <el-form-item label="店铺介绍" label-width="100px">
          <el-input v-model="selectTable.description"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" label-width="100px">
          <el-input v-model="selectTable.phone"></el-input>
        </el-form-item>
        <el-form-item label="店铺分类" label-width="100px">
          <el-cascader :options="categoryOptions" v-model="selectedCategory" change-on-select></el-cascader>
        </el-form-item>
        <el-form-item label="商铺图片" label-width="100px">
          <el-upload
            class="avatar-uploader"
            :action="baseUrl + '/v1/addimg/shop'"
            :show-file-list="false"
            :on-success="handleServiceAvatarScucess"
            :before-upload="beforeAvatarUpload">
            <img v-if="selectTable.image_path" :src="baseImgPath + selectTable.image_path" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateShop">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import api from '@/api/center'
  import store from '@/store'

  export default {
    data() {
      return {
        baseUrl: '',//服务器地址
        baseImgPath: '',//头像地址
        city: {},//定位信息
        offset: 0,//跳过数量
        limit: 10,//一页数量
        count: 0,//总数量
        tableData: [],//列表数据
        currentPage: 1,//分页
        selectTable: {},//修改店铺信息
        dialogFormVisible: false,//修改标识
        categoryOptions: [],//店铺分类
        selectedCategory: [],//选择店铺分类
        address: {},//详细地址
      }
    },
    created() {
      this.baseImgPath = this.$store.state.imgPath;
      this.baseUrl = this.$store.state.path;
      this.initData();
    },
    methods: {
      initData() {
        try {
          api.queryUserGuess({type: 'guess'}).then(res => {
            if (res.name === 'ERROR_DATA') {
              this.city.latitude = '22.544049';
              this.city.longitude = '114.059560';
            }else {
              this.city = res;
            }
            this.getResturants();
          });
          api.queryShopCount().then(res => {
            if (res.status === 1) {
              this.count = res.count;
            } else {
              console.log('获取数据失败');
            }
          });
        } catch (err) {
          console.log('获取数据失败', err);
        }
      },
      getResturants() {
        const {latitude, longitude} = this.city;
        let params = {
          latitude: latitude,
          longitude: longitude,
          offset: this.offset,
          limit: this.limit
        };
        api.queryShopLists(params).then(res => {
          this.tableData = [];
          res.forEach(item => {
            const tableData = {};
            tableData.name = item.name;
            tableData.address = item.address;
            tableData.description = item.description;
            tableData.id = item.id;
            tableData.phone = item.phone;
            tableData.rating = item.rating;
            tableData.recent_order_num = item.recent_order_num;
            tableData.category = item.category;
            tableData.image_path = item.image_path;
            this.tableData.push(tableData);
          })
        });
      },
      getCategory() {
        try {
          api.queryShopCategory().then(res => {
            res.forEach(item => {
              if (item.sub_categories.length) {
                const addnew = {
                  value: item.name,
                  label: item.name,
                  children: []
                }
                item.sub_categories.forEach((subitem, index) => {
                  if (index == 0) {
                    return
                  }
                  addnew.children.push({
                    value: subitem.name,
                    label: subitem.name,
                  })
                })
                this.categoryOptions.push(addnew)
              }
            })
          });
        } catch (err) {
          console.log('获取商铺种类失败', err);
        }
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.offset = (val - 1) * this.limit;
        this.getResturants()
      },
      handleEdit(index, row) {
        this.selectTable = row;
        this.address.address = row.address;
        this.dialogFormVisible = true;
        this.selectedCategory = row.category.split('/');
        if (!this.categoryOptions.length) {
          this.getCategory();
        }
      },
      addFood(index, row) {
        this.$router.push({path: 'addGoods', query: {restaurant_id: row.id}})
      },
      handleDelete(index, row) {
        try {
          api.queryShopCategory().then(res => {
            if (res.status === 1) {
              this.$message({
                type: 'success',
                message: '删除店铺成功'
              });
              this.tableData.splice(index, 1);
            } else {
              this.$message({
                type: 'error',
                message: res.message
              });
            }
          });
        } catch (err) {
          this.$message({
            type: 'error',
            message: err.message
          });
          console.log('删除店铺失败')
        }
      },
      querySearchAsync(queryString, cb) {
        if (queryString) {
          try {
            let params = {
              city_id: this.city.id,
              keyword: queryString
            };
            api.queryCity(params).then(res => {
              const cityList = res;
              if (cityList instanceof Array) {
                cityList.map(item => {
                  item.value = item.address;
                  return item;
                })
                cb(cityList)
              }
            });
          } catch (err) {
            console.log(err)
          }
        }
      },
      addressSelect(vale) {
        const {address, latitude, longitude} = vale;
        this.address = {address, latitude, longitude};
      },
      handleServiceAvatarScucess(res, file) {
        if (res.status == 1) {
          this.selectTable.image_path = res.image_path;
        } else {
          this.$message.error('上传图片失败！');
        }
      },
      beforeAvatarUpload(file) {
        const isRightType = (file.type === 'image/jpeg') || (file.type === 'image/png');
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isRightType) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isRightType && isLt2M;
      },
      updateShop() {
        this.dialogFormVisible = false;
        try {
          Object.assign(this.selectTable, this.address);
          this.selectTable.category = this.selectedCategory.join('/');
          api.updateShop(this.selectTable).then(res => {
            if (res.status == 1) {
              this.$message({
                type: 'success',
                message: '更新店铺信息成功'
              });
              this.getResturants();
            } else {
              this.$message({
                type: 'error',
                message: res.message
              });
            }
          });
        } catch (err) {
          console.log('更新餐馆信息失败', err);
        }
      },
    },
  }
</script>
<style lang="stylus" scoped>
  .demo-table-expand {
    font-size 0
  }

  .demo-table-expand label {
    width 90px
    color #99a9bf
  }

  .demo-table-expand .el-form-item {
    margin-right 0
    margin-bottom 0
    width 50%
  }

  .Pagination {
    display flex
    justify-content flex-start
    margin-top 8px
  }

  .avatar-uploader .el-upload {
    border 1px dashed #d9d9d9
    border-radius 6px
    cursor pointer
    position relative
    overflow hidden
  }

  .avatar-uploader .el-uploadhover {
    border-color #20a0ff
  }

  .avatar-uploader-icon {
    font-size 28px
    color #8c939d
    width 120px
    height 120px
    line-height 120px
    text-align center
  }

  .avatar {
    width 120px
    height 120px
    display block
  }
</style>
